<template>
	<view class="content">
		<view class="registerBox" v-if="!registerSuccess">
			<view class="registerInternalBox">
				<view class="" style="position: relative;margin-top: 30rpx;">
					<view class="flex">
						<picker @change="bindPickerChange" :value="index" :range="array" range-key="code">
							<view class="picker" v-if="array[0]">+{{array[index].code}}</view>
						</picker>
						<image src="../../static/sj.png" mode="widthFix" style="width: 25rpx;"></image>
					</view>
					<input v-model="form.mobile" class="uni-input" focus placeholder="请输入手机号" />
				</view>
				<view class="" style="position: relative;">
					<input v-model="form.code" class="code" placeholder="请输入验证码" />
					<view class="codeBox" @click="startCountdown()">
						{{ buttonText }}
					</view>
				</view>
				<view class="btnBox" @click="registerFun">
					注 册
				</view>
				<view class="btnBox xxl" style="margin-top:20px;background-color:#ff2e2e">
					下载APP注册
				</view>
			</view>
		</view>
		<view class="btnBox downloadBox xxl" @click="downloadFun" v-if="registerSuccess">
			下 载
		</view>
		<maskCom ref="child"></maskCom>
	</view>
</template>

<script>
	import maskCom from '@/components/maskCom.vue'
	import {
		getCode,
		register,
		getQuhao
	} from '@/api/index.js'
	export default {
		components: {
			maskCom
		},
		data() {
			return {
				title: 'Hello',
				buttonText: '获取验证码',
				counting: false,
				form: {
					mobile: '',
					country_code: '86',
					code: '',
					invitation_code: ''
				},
				array: [],
				index: 0,
				isShowProgress: false,
				progress: 0,
				registerSuccess: false,
			}
		},
		onLoad(e) {
			
		},
		mounted(e) {
			let query=this.$route.query
			if(query.invitation_code){
				this.form.invitation_code = query.invitation_code
			}
			if(query.parent_agent){
				this.form.parent_agent = query.parent_agent
			}
			this.getQuhao()

			setTimeout(()=>{
				ULink(
				[{
					id: 'usr11jeqgs9gdsoj',
					data: {
						invitation_code:query.invitation_code,
						parent_agent:query.parent_agent
					},
					selector: '.xxl',
					// timeout: 2000,
					// useOpenInBrowerTips: 'default',
					useOpenInBrowerTips: "default",
					lazy: true,
					auto: false,
				}]);
			},100)
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.form.country_code = this.array[this.index].code
			},
			toForm() {
				uni.navigateTo({
					url: '/pages/long/long'
				})
			},
			async startCountdown(id) {
				var that = this
				if (!this.form.mobile) {
					uni.showToast({
						title: "请填写手机号",
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: "数据加载中..."
				})
				try {
					const res = await getCode(that.form)
					uni.hideLoading()
					// that.dataList = res.data
					if (res.code == 200) {
						uni.showToast({
							title: "发送成功",
							icon: 'none'
						})

						that.counting = true;
						that.countdown = 60;
						that.buttonText = that.countdown + ' 秒倒计时';
						const timerId = setInterval(() => {
							that.countdown -= 1;
							that.buttonText = that.countdown + ' 秒倒计时';
							if (that.countdown <= 0) {
								clearInterval(timerId);
								that.counting = false;
								that.buttonText = '获取验证码';
							}
						}, 1000);

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'

						})
					}

					// 保存数据
				} catch (err) {
					uni.hideLoading()
				}
			},

			async registerFun() {
				console.log("this.form", this.form)
				let that = this
				if (!(this.form.mobile && this.form.code)) {
					uni.showToast({
						title: "请将信息填写完整",
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: "注册中..."
				})
				try {
					const res = await register(that.form)
					uni.hideLoading()
					// that.dataList = res.data
					if (res.code == 200) {
						uni.showToast({
							title: "注册成功",
							icon: 'none'
						})
						this.registerSuccess = true
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.registerSuccess = true
					}
					// 保存数据
				} catch (err) {
					uni.hideLoading()
				}
			},

			async getQuhao() {
				let that = this
				try {
					const res = await getQuhao(that.form)
					uni.hideLoading()
					// that.dataList = res.data
					if (res.code == 200) {
						that.array = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'

						})
					}
					// 保存数据
				} catch (err) {
					uni.hideLoading()
				}
			},
			imgBoxFun() {
				window.close() //关闭
			},
			downloadFun() {
				//window.close() //关闭
				this.$refs.child.downloadFun();
			}
		}
	}
</script>

<style>
	.content {
		background-image: url('@/static/Maskgroup2x.png');
		height: 100vh;
		width: 100vw;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		/* background-position: 100% ; */
		/* background-attachment: fixed */
	}



	.btnBox {
		width: 90%;
		height: 80rpx;
		border-radius: 45rpx;
		background-color: #6D6A83;
		line-height: 80rpx;
		text-align: center;
		color: white;
		margin: 0 auto;
	}

	.registerBox {
		width: 80%;
		border-radius: 20rpx;
		height: 600rpx;
		background-color: aliceblue;
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 20vh;
		/* top: 700rpx; */
		background-image: linear-gradient(150deg, #CFFCFF, #AC79FF);
		padding: 20rpx;
	}

	.registerInternalBox {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background-image: linear-gradient(150deg, #FAECFF, #E3DCFF);
		overflow: hidden;
	}

	.uni-input {
		background-color: white;
		height: 80rpx;
		width: 340rpx;

		/* margin: 30rpx auto; */
		border-radius: 40rpx;
		padding-left: 200rpx;
		margin: 50rpx;
		margin-left: 30rpx;
	}

	.code {
		background-color: white;
		height: 80rpx;
		width: 80%;
		margin: 50rpx auto;
		border-radius: 40rpx;
		padding-left: 50rpx;

	}

	.codeBox {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 20rpx;
		text-align: center;
		color: white;
		position: absolute;
		right: 50rpx;
		top: 10rpx;
		background-color: #a1a1a1;
		border-radius: 30rpx;
	}

	.flex {
		display: flex;
		width: 100rpx;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		left: 80rpx;
		top: 20rpx;
		/* overflow: hidden; */
	}

	.downloadBox {
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 200rpx;
	}

	.imgBox {
		position: absolute;
		left: 50rpx;
		top: 35rpx;
	}
</style>